<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算元素的高度</title>
</head>
<body>
        <div id="main">
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <img src="img/2.jpg" id="box"/>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            <div>踮起脚尖，才能更接近阳光</div>
            </div>
            <script>
                var s = document.getElementById('box');   //找到元素的对象
                var z = s.offsetTop;                        //获取元素到顶部的距离，加上滚动条里的距离
                var l = document.body.scrollTop;            //获取元素上方滚动条隐藏部分的距离
                var h = z - l;                                  //   获取到元素到窗口顶部的距离
                console.log(h);


                var j = document.body.clientHeight;         //获取整个窗口的高度
                var d = j - h;                                  //获取元素上方到底部的距离
                console.log(d);


                var k = document.body.offsetHeight;           //获取图片的高度
                var n = d - k;                                    //获取图片的下方到底部的距离
                console.log(n);

                //
                //(document.documentElement.clientHeight - (s.offsetTop - document.body.scrollTop)) - s.offsetHeight

            </script>
</body>
</html>